<template>
    <div class="login">
        <div class="title">
            <p>电商后台</p>
            <p>管理系统</p>
        </div>

        <div class="login_box">
            <div class="img_box">
                <img src="../assets/5.jpg" alt="">
            </div>
            <el-form  ref="LoginFormRef" label-width="0" class="form" :model="people" :rules="LoginFormRules">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="people.username"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" suffix-icon="el-icon-view" v-model="people.password" type="password"></el-input>
                </el-form-item>

                <el-form-item class="btns">
                    <el-button type="primary" @click="LoginJiaoyan">登陆</el-button>
                    <el-button type="success" @click="restLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
<!--            <p>{{people.username}} </p>-->
<!--            <p>{{people.password}} </p>-->
        </div>

    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                people:{
                    username:'admin',
                    password:'123456',
                },
                LoginFormRules:{
                    username:[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 5, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        methods:{
            restLoginForm(){
                this.$refs.LoginFormRef.resetFields();
                this.people.username='';
                this.people.password='';
            },
            LoginJiaoyan(){
                this.$refs.LoginFormRef.validate(valid=> {
                    if(!valid)
                        return;
                    this.$http.post('login',this.people).then(res=>{
                        // console.log(res);
                        if(res.data.meta.status===200){
                            window.sessionStorage.setItem('token',res.data.data.token);
                            this.$router.push('/home');
                            return this.$message.success("登陆成功");

                        }
                        else{
                            console.log(res);
                            return this.$message.error("登陆失败");
                        }

                    })

                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .login{
        background: #2b4b6b;
        height: 100vh;
        .title{
            position: absolute;
            top: 20%;
            left: 50%;
            color: white;
            font-size: 30px;
            transform: translate(-50%,-50%);
            display: flex;
            width: 400px;
            justify-content: space-between;

            -webkit-text-fill-color: transparent;
            background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
            background-size: 200%,100%;
            -webkit-background-clip: text;
            -webkit-animation: word 3s linear infinite ;

        }
        .login_box{
            height: 300px;
            width: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            background: #ffffff;
            transform: translate(-50%,-50%);
            box-shadow: 5px 10px 15px #666666;
            border-radius: 10px;

            .img_box{
                width: 130px;
                height: 130px;
                border: 1px solid #eeeeee;
                border-radius: 50%;
                box-shadow: 0 0 15px #dddddd;
                background-color: #ffffff;
                padding: 10px;
                position: absolute;
                left: 50%;
                transform: translate(-50%,-50%);
                img{
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                    background-color: #eeeeee;
                }
            }
            .form{
                position: absolute;
                bottom: 15px;
                width: 100%;
                padding: 0 15px;
                box-sizing: border-box;
                .btns{
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
    }
    @keyframes word {
        0%{background-position: 0 0}
        100%{background-position: -100% 0}
    }
</style>
